import React, { PureComponent } from "react"

class Tabs extends PureComponent {
  state = {
    activeIndex: this.props.activeIndex
  }
  tabChange = (event, index) => {
    event.preventDefault()
    this.setState({
      activeIndex: index
    })
    this.props.onTabChange(index)
  }
  render() {
    const { children } = this.props
    const { activeIndex } = this.state
    return (
      <ul className="nav nav-tabs nav-fill my-4">
        {React.Children.map(children, (child, index) => {
          const active = activeIndex === index ? " active" : ""
          return (
            <li className="nav-item">
              <a
                href="#1"
                className={`nav-link${active}`}
                onClick={event => {
                  this.tabChange(event, index)
                }}
              >
                {child}
              </a>
            </li>
          )
        })}
      </ul>
    )
  }
}

export const Tab = ({ children }) => <React.Fragment>{children}</React.Fragment>

export default Tabs
